<template>
    <!-- 渲染日程全部列表对话框 -->
    <app-dialog class="schedule-all-list-dialog" v-model="dialogVisible" :width="500">
        <!-- 日程列表容器 -->
        <div class="schedule-list-container">
            <!-- 当没有日程时显示提示信息 -->
            <div v-if="!scheduleList || scheduleList.length <= 0" class="empty-list">
                暂无日程
            </div>
            <!-- 当有日程时显示日程列表 -->
            <div v-else class="schedule-list">
                <!-- 遍历日程列表，渲染每个日程项 -->
                <div class="schedule-item" v-for="schedule in scheduleList" :key="schedule.id">
                    <!-- 日程卡片容器 -->
                    <div class="card-container">
                        <!-- 显示日程标题 -->
                        <div class="schedule-title">标题：{{ schedule.title }}</div>
                        <!-- 显示日程时间范围 -->
                        <div class="schedule-time">时间：
                            {{ moment(schedule.startTime).format('YYYY-MM-DD HH:mm') }}
                             - 
                            {{ moment(schedule.endTime).format('YYYY-MM-DD HH:mm') }}
                        </div>
                        <!-- 显示日程地点 -->
                        <div class="schedule-location">地点：{{ schedule.location }}</div>
                    </div>
                    <!-- 删除单个日程的按钮 -->
                    <button class="delete-button" @click="deleteSchedule(schedule.id)">删除</button>
                </div>
            </div>
        </div>
        <!-- 按钮组 -->
        <div class="button-group">
            <!-- 当日程数量大于 1 时显示清空日程按钮 -->
            <button v-show="scheduleList && scheduleList.length > 1" class="clear-button" @click="clearSchedule">清空日程</button>
            <!-- 关闭对话框按钮 -->
            <button @click="dialogVisible = false">关闭</button>
        </div>
    </app-dialog>
</template>

<script lang="ts" setup>
// 从 Vue 导入响应式 API 和计算属性
import { ref, computed, type ComputedRef } from 'vue';
// 导入 moment 库用于时间格式化
import moment from 'moment';
// 导入日程实体类型
import type Schedule from '@/entity/Schedule';
// 导入日程状态管理 store
import { useScheduleStore } from '@/stores/scheduleStore';
// 导入自定义对话框组件
import AppDialog from './app-dialog.vue';

/**
 * 定义组件属性，接收对话框显示状态
 */
const props = defineProps<{ modelValue: boolean }>();
/**
 * 定义组件事件，用于更新对话框显示状态
 */
const emit = defineEmits(['update:modelValue']);

/**
 * 定义计算属性，用于双向绑定对话框显示状态
 */
const dialogVisible = computed({
    get: () => props.modelValue,
    set: (value: boolean) => emit('update:modelValue', value)
});

// 初始化日程状态管理 store
const scheduleStore = useScheduleStore();
/**
 * 定义计算属性，获取所有日程列表
 */
const scheduleList: ComputedRef<Schedule[]> = computed(() => scheduleStore.scheduleList);

/**
 * 删除单个日程的方法
 * @param id - 要删除的日程的 ID
 */
const deleteSchedule = (id: number) => {
    scheduleStore.deleteSchedule(id);
};

/**
 * 清空所有日程的方法
 */
const clearSchedule = () => {
    scheduleStore.clearSchedule();
}
</script>

<style lang="scss" scoped>
/**
 * 日程全部列表对话框样式
 */
.schedule-all-list-dialog {
    // 设置对话框层级
    z-index: 1000;

    /**
     * 日程列表容器样式
     */
    .schedule-list-container {
        // 设置上下边距
        margin: 10px 0;
        // 设置最大高度，超出部分可滚动
        max-height: 450px;
        overflow-y: auto;

        /**
         * 无日程提示信息样式
         */
        .empty-list {
            // 水平和垂直居中显示
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /**
         * 日程列表样式
         */
        .schedule-list {
            /**
             * 单个日程项样式
             */
            .schedule-item {
                // 水平布局
                display: flex;
                flex-direction: row;
                // 设置外边距
                margin: 5px;
                // 设置边框
                border: 1px solid #e0e0e0;
                // 设置边框圆角
                border-radius: 8px;
                // 设置阴影
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                // 设置过渡效果
                transition: all 0.3s ease;

                &:hover {
                    // 鼠标悬停时向上移动
                    transform: translateY(-3px);
                    // 鼠标悬停时增加阴影
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                }

                /**
                 * 日程卡片容器样式
                 */
                .card-container {
                    // 占据剩余空间
                    flex-grow: 1;
                    // 设置内边距
                    padding: 8px;

                    /**
                     * 日程标题样式
                     */
                    .schedule-title {
                        // 设置字体大小
                        font-size: 18px;
                        // 设置字体加粗
                        font-weight: bold;
                        // 设置字体颜色
                        color: #333;
                    }

                    /**
                     * 日程时间样式
                     */
                    .schedule-time {
                        // 设置字体大小
                        font-size: 14px;
                        // 设置字体颜色
                        color: #666;
                        // 设置上下边距
                        margin: 5px 0;
                    }

                    /**
                     * 日程地点样式
                     */
                    .schedule-location {
                        // 设置字体大小
                        font-size: 14px;
                        // 设置字体颜色
                        color: #666;
                    }
                }

                /**
                 * 删除按钮样式
                 */
                .delete-button {
                    // 设置背景颜色
                    background-color: #ff4d4f;
                    // 设置字体颜色
                    color: white;
                    // 移除边框
                    border: none;
                    // 设置右侧边框圆角
                    border-radius: 0 8px 8px 0;
                    // 设置内边距
                    padding: 8px 12px;
                    // 设置鼠标指针样式
                    cursor: pointer;
                    // 设置过渡效果
                    transition: background-color 0.3s ease;

                    &:hover {
                        // 鼠标悬停时降低透明度
                        opacity: 0.9;
                    }
                }
            }
        }
    }

    /**
     * 按钮组样式
     */
    .button-group {
        // 垂直布局
        display: flex;
        flex-direction: column;
        // 设置元素间距
        gap: 10px;

        button {
            // 设置内边距
            padding: 8px 16px;
            // 移除边框
            border: none;
            // 设置边框圆角
            border-radius: 4px;
            // 设置鼠标指针样式
            cursor: pointer;

            &:hover {
                // 鼠标悬停时降低透明度
                opacity: 0.9;
            }

            /**
             * 清空日程按钮样式
             */
            &.clear-button {
                // 设置背景颜色
                background-color: #ff4d4f;
                // 设置字体颜色
                color: white;
            }
        }
    }
}
</style>